<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="UTF-8">
    <title>upload bolckchain</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/admin/css/common.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
</head>
<form class="layui-form" action="">
    <div class="layui-form user-info-form layui-text" style="max-width: 400px;padding-top: 25px;">
        <div class="layui-form-item">
            <label class="layui-form-label">日期:</label>
            <div class="layui-input-block">
                <input type="text" name="date" id="dateInput" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">摘要:</label>
            <div class="layui-input-block">
                <input type="text" name="zhaiYao" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">借方科目:</label>
            <div class="layui-input-block">
                <input type="text" name="jieKeMu" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">借方金额(元):</label>
            <div class="layui-input-block">
                <input type="text" name="jieMoney" value="" class="layui-input" lay-verify="number"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">贷方科目:</label>
            <div class="layui-input-block">
                <input type="text" name="daiKeMu" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">贷方金额(元):</label>
            <div class="layui-input-block">
                <input type="text" name="daiMoney" value="" class="layui-input" lay-verify="number"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">甲方:</label>
            <div class="layui-input-block">
                <input type="text" name="jia" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">乙方:</label>
            <div class="layui-input-block">
                <input type="text" name="yi" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第三方:</label>
            <div class="layui-input-block">
                <input type="text" name="san" value="" class="layui-input" lay-verify="required"
                       required="">
            </div>
        </div>
        <div class="layui-form-item" id="hashValueDiv" style="display: none">
            <label class="layui-form-label">hashValue:</label>
            <div class="layui-input-block">
                <input type="text" name="hashValue" value="" class="layui-input"
                       required="">
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit=""
                    lay-filter="data-blockchain">
                <i class="layui-icon layui-icon-ok"></i>
                数据上链
            </button>
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit=""
                    lay-filter="verifychainHashValue">
                <i class="layui-icon layui-icon-ok"></i>
                hashValue验证
            </button>
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit=""
                    lay-filter="verifychainData">
                <i class="layui-icon layui-icon-ok"></i>
                数据验证
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

</body>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.jquery
            , upload = layui.upload;

        //执行一个laydate实例
        laydate.render({
            elem: '#dateInput' //指定元素
        });

        //监听提交
        form.on('submit(data-blockchain)', function (data) {
            delete data.field.hashValue;
            $.ajax({
                url: "https://test.ellipticcurve.com.cn:8083/test/insertHashValue",
                type: "post",
                dataType: "json",
                data: JSON.stringify(data.field),
                headers: {
                    "Authorization": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5Nzc2MTYzNywiaWF0IjoxNTk3NzQzNjM3fQ.8vQ-U0QHfB0Ss6fDRRGpdwhB5ra7cvhYOVt31lL_Ii4P5UjqXf_XUbJZBaj82_yN9iwN1J6LBQLJWWobM3MaEw",
                    "Content-Type": "application/json"
                },
                success: function (result) {
                    $("#hashValueDiv").css("display", "block")
                    $("input[name='hashValue']").val(result.data.hashValue);
                    parent.layer.open({
                        title: "blockchain info",
                        content: result.msg
                    })
                }, error: function (err) {
                    parent.layer.msg(err.msg)
                }

            })
            return false;
        });
        //监听提交
        form.on('submit(verifychainHashValue)', function (data) {
            if ($("input[name='hashValue']").val() == "") {
                parent.layer.msg("请先上链数据 ！")
                return false;
            }
            layer.confirm(data.field.hashValue, {icon: 3, title: 'verify bolockchain by hashValue?'}, function (index) {
                $.ajax({
                    async: false,
                    url: "https://test.ellipticcurve.com.cn:8083/test/verifyHashValue",
                    type: "post",
                    dataType: "json",
                    data: {"hashValue": data.field.hashValue},
                    headers: {
                        "Authorization": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5Nzc2MTYzNywiaWF0IjoxNTk3NzQzNjM3fQ.8vQ-U0QHfB0Ss6fDRRGpdwhB5ra7cvhYOVt31lL_Ii4P5UjqXf_XUbJZBaj82_yN9iwN1J6LBQLJWWobM3MaEw",
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    success: function (result) {
                        console.log(result);
                        console.log(result.msg);
                        parent.layer.open({
                            title: "blockchain info",
                            content: result.msg
                        })
                    }, error: function (err) {
                        parent.layer.msg("验证区块链失败 ！")
                    }

                })
                layer.close(index);
            });
        return false;
    });
    //监听提交
    form.on('submit(verifychainData)', function (data) {
        delete data.field.hashValue;
        layer.confirm(JSON.stringify(data.field), {icon: 3, title: 'verify bolockchain by data?'}, function (index) {
            $.ajax({
                url: "https://test.ellipticcurve.com.cn:8083/test/verifyData",
                type: "post",
                dataType: "json",
                data: JSON.stringify(data.field),
                headers: {
                    "Authorization": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5Nzc2MTYzNywiaWF0IjoxNTk3NzQzNjM3fQ.8vQ-U0QHfB0Ss6fDRRGpdwhB5ra7cvhYOVt31lL_Ii4P5UjqXf_XUbJZBaj82_yN9iwN1J6LBQLJWWobM3MaEw",
                    "Content-Type": "application/json"
                },
                success: function (result) {
                    parent.layer.open({
                        title: "blockchain info",
                        content: result.msg
                    })
                }, error: function (err) {
                    parent.layer.msg(err.msg)
                }
            })
            layer.close(index);
        });
        return false;
    });
    })
    ;
</script>
</html>
